<!--
 * @Description: 
 * @Author: zzj
 * @Date: 2021-10-18 16:07:48
 * @LastEditors: zzj
 * @LastEditTime: 2021-10-18 16:57:24
-->
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>守卫</title>
	<script src="https://unpkg.com/vue@next"></script>
	<script src="https://unpkg.com/vue-router@4"></script>
</head>
<body>
	<div id="app">
		{{msg}}
		<div>
			<router-link to="/article">文章</router-link>
			<router-link to="/details/1">文章1</router-link>
			<router-link to="/details/2">文章2</router-link>
			<router-link to="/details/3">文章3</router-link>
			<router-link to="/category">栏目</router-link>
		</div>
		<hr/>
		<div>
			<!-- 接收跳转之后的组件 -->
			<router-view></router-view>
		</div>
	</div>
	<script>
		let Article = {
			template:`
				<div>文章管理</div>
			`,
			created(){
				console.log("文章 created")
			},
			//组件内部守卫
			beforeRouteEnter(){
				console.log("--文章---beforeRouteEnter")
			},
			beforeRouteUpdate() {
				console.log("--文章---beforeRouteUpdate")
			},
			beforeRouteLeave() {
				console.log("--文章---beforeRouteLeave")
			}
		}
		let ArticleDetails = {
			template: `
			<div>文章详情。。。</div>
		`,
		created() {
			console.log("文章详情 created")
		},
		//组件内部守卫
		beforeRouteEnter() {
			console.log("--文章详情---beforeRouteEnter")
		},
		beforeRouteUpdate() {
			console.log("--文章详情---beforeRouteUpdate")
		},
		beforeRouteLeave() {
			console.log("--文章详情---beforeRouteLeave")
		}
		};
		let Category = {
				template: `
				<div>栏目管理</div>
			`
			};

		let app = Vue.createApp({
			data(){
				return {msg:"守卫"}
			}
		});

		let router = VueRouter.createRouter({
			history:VueRouter.createWebHashHistory(),
			routes:[{
				path:"/article",
				component:Article
			}, {
				path:"/details/:id",
				component: ArticleDetails,
				//组件独享守卫
				beforeEnter: function () {  //参数改变不会触发
					console.log("~文章详情  独享守卫~")
				}
			},
			{
				path: "/category",
				component: Category,
				//组件独享守卫
				beforeEnter:function(){
					console.log("~独享守卫~")
				}
			}]
		})

		//全局前置守卫
		router.beforeEach((to, from) => {
			console.log("----beforeEach-----");
			console.log(to.path);
		});
		//全局后置守卫
		router.afterEach((to, from) => {
			console.log("----afterEach-----");
			// console.log(to.path);
		});

		app.use(router);
		app.mount("#app")

	
	</script>
</body>
</html>